<template>
<div>

	<router-link class="header-abs" tag="div" to="/" v-show="showAbs">

		<div class="iconfont back-icon">&#xe624;</div>
	</router-link>

	<div 
		class="header-fixed" 
		v-show="!showAbs"
		:style="opacityStyle"
		>
		
		<router-link to="/">
		<div class="iconfont header-fixed-back">&#xe624;</div>
	</router-link>
	
	景点详情
	</div>

</div>
	
</template>

<script>
	export default {
		name:'DetailHeader',
		data() {
			return {
				showAbs: true,
				opacityStyle : {
					opacity:0
				}
			}
		},
		methods: {
			handleScroll () {
				console.log('scroll')
				const top = document.documentElement.scrollTop;
				if (top > 60 ) {
					let opacity = top/140;
					
					opacity = opacity >1 ? 1 : opacity
					
					this.opacityStyle = {
						opacity
					}
					
					this.showAbs = false
				}
				else {
					this.showAbs = true
				}
//				console.log(document.documentElement.scrollTop);
			}
		},
		activated () {
			window.addEventListener('scroll',this.handleScroll)
		},
		deactivated () {
			window.removeEventListener('scroll',this.handleScroll)
		}
	}
</script>

<style lang="stylus" scoped="scoped">
	@import '~styles/varibles.styl'
	.header-fixed
	  position: fixed;
	  z-index:2 ;
	  top: 0;
	  left: 0;
	  right: 0;
	  height: $HeaderHeight;
	  line-height: $HeaderHeight;
	  text-align: center;
	  font-size: .32rem;
	  background: $bgColor;
	  color: #fff;
		.header-fixed-back
		  position: absolute;
		  font-size: .4rem;
		  width: .64rem;
		  top: 0;
		  left: 0;
		  text-align: center;
		  color: #fff;
	.header-abs
		position: absolute;
		left: .2rem;
		top: .2rem;
		width: .6rem;
		height: .6rem;
		border-radius: .3rem;
		text-align: center;
		line-height: .6rem;
		background: rgba(0,0,0,0.6);
		.back-icon
			font-size: .3rem;
			color: #fff;
</style>